import {View, StyleSheet, Text, TouchableOpacity, FlatList} from 'react-native';
import Location from 'assets/Images/location.svg';
import {SvgXml} from 'react-native-svg';
import {Tooltip} from 'react-native-paper';
import fire from 'assets/Images/fire.svg';
import help from 'assets/Images/help.svg';
import {useContext, useEffect, useState} from 'react';
import {Context} from '../index';
import useDimensions from 'hooks/useDimensions';
import {useAppSelector} from 'app/store';
import {useNavigation} from '@react-navigation/native';
import request from 'axios';
import {type ContextType} from '../index';
type FlatListItem = Api.resBody['警情信息主表'] & {
  LatLng: GlobalMap.location;
};
// flatlist item render
const ListItem = (
  {
    item,
    index,
  }: {
    item: FlatListItem;
    index: number;
  },
  changeMarker: (location: GlobalMap.location, index: 0 | 1 | 2) => void,
  Navigation: any,
  StartNav: (end: {
    target: {
      latitude: number;
      longitude: number;
    };
  }) => void,
  hp: number,
) => {
  const styles = StyleSheet.create({
    ListItem: {
      width: 456 * hp,
      height: 112 * hp,
      backgroundColor: '#FFFFFF',
      borderRadius: 16 * hp,
      flexDirection: 'row',
      padding: 16 * hp,
      alignItems: 'center',
      marginBottom: 12 * hp,
    },
  });
  return (
    <View style={styles.ListItem}>
      <TouchableOpacity
        onPress={() => {
          changeMarker(item.LatLng, index as 0 | 1 | 2);
          // setInactive(false);
          Navigation();
          // Navigation.navigate('PoliceIntelligence',{})
        }}
        style={{
          width: 364 * hp,
          borderRightColor: 'rgba(0, 0, 0, 0.08)',
          borderRightWidth: 1 * hp,
        }}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            marginBottom: 8 * hp,
          }}>
          <SvgXml
            {...{width: 20 * hp, height: 20 * hp}}
            xml={item.incidentType === '火灾扑救' ? fire : help}
          />
          <Text
            style={{
              fontSize: 20 * hp,
              fontWeight: '500',
              color: 'rgba(0,0,0,0.9)',
            }}>
            {item.incidentType}
          </Text>
        </View>
        <Text
          style={{
            fontSize: 16 * hp,
            color: 'rgba(0,0,0,0.6)',
            marginBottom: 8 * hp,
          }}>
          {item.address}
        </Text>
        <Text
          style={{
            fontSize: 14 * hp,
            color: 'rgba(0,0,0,0.6)',
          }}>
          {'报警时间:' + item.incidentTime}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{padding: 20 * hp}}
        onPress={async () => {
          StartNav({
            target: item.LatLng,
          });
        }}>
        <Text
          style={{
            fontSize: 18 * hp,
            color: '#0A59F7',
          }}>
          导航
        </Text>
      </TouchableOpacity>
    </View>
  );
};
export default () => {
  const hp = useDimensions();
  const Navigation = useNavigation();
  const temperature = useAppSelector(state => state.app.temperature);
  const [address, setAddress] = useState('');
  const context = useContext(Context) as ContextType;
  const styles = StyleSheet.create({
    panelContent: {
      paddingLeft: 16 * hp,
      paddingRight: 16 * hp,
      paddingTop: 24 * hp,
    },
    temperature: {
      flexDirection: 'row',
    },
    address: {
      fontSize: 16 * hp,
      color: 'rgba(0,0,0,0.6)',
      lineHeight: 19 * hp,
    },
  });
  const onNavigate = () => {
    // @ts-ignore
    Navigation.navigate('PoliceIntelligence', {});
  };
  useEffect(() => {
    if (context?.location) {
      (async location => {
        const {latitude, longitude} = location;
        request({
          url: 'https://restapi.amap.com/v3/geocode/regeo',
          params: {
            key: '62e4a5947567b50561ac03df781c518c',
            location: longitude + ',' + latitude,
          },
        }).then(({data}) => {
          setAddress(data.regeocode.formatted_address ?? '');
        });
      })(context.location);
    }
  }, [context.location]);
  return (
    <View
      style={{
        borderRadius: 16,
        position: 'relative',
      }}>
      <View style={styles.panelContent}>
        <View style={styles.temperature}>
          <Text
            style={{
              fontSize: 48 * hp,
              lineHeight: 51 * hp,
              fontWeight: '500',
              color: 'rgba(0, 0, 0, 0.90)',
            }}>
            {temperature}
          </Text>
          <Text
            style={{
              fontSize: 24 * hp,
              color: '#121212',
              lineHeight: 28 * hp,
            }}>
            ℃
          </Text>
        </View>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
          }}>
          <SvgXml {...{width: 18 * hp, height: 18 * hp}} xml={Location} />
          <Tooltip title={address}>
            <Text numberOfLines={1} ellipsizeMode="tail">
              {address}
            </Text>
          </Tooltip>
        </View>
        <View
          style={{
            // backgroundColor: 'black',
            height: 500 * hp,
            marginTop: 32 * hp,
          }}>
          <FlatList
            data={context.List}
            showsVerticalScrollIndicator={false}
            renderItem={info => {
              return ListItem(
                info,
                context.changeMarker,
                onNavigate,
                context.StartNav,
                hp,
              );
            }}
            style={{
              flex: 1,
            }}
            keyExtractor={(_, index) => index + ''}
          />
        </View>
      </View>
    </View>
  );
};
